<script>
import axios from "axios"; // 导入axios库用于发起HTTP请求
import SelectInput from "@/components/SelectInput.vue"; // 导入SelectInput组件
import BottomPagination from "@/components/BottomPagination.vue"; // 导入BottomPagination组件

export default {
  name: "MainContent", // 组件名称
  components: { // 组件注册
    BottomPagination, // 注册BottomPagination组件
    SelectInput // 注册SelectInput组件
  },
  data() {
    return {
      items: [], // 存储全部数据
      visibleItems: [], // 存储当前页数据
      pageSize: 6, // 每页显示条数
      currentPage: 1, // 当前页码
      visible: false, // 删除按钮的显示状态
      dialogFormVisible: false, // 编辑表单的显示状态
      Form: { // 表单数据模型
        id: null,
        name: '',
        phone: '',
        bookName: '',
        borrowDate: '',
        returnDate: ''
      },
      rules: { // 表单验证规则
        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
        phone: [{required: true, message: "请输入电话", trigger: "blur"}],
        bookName: [{required: true, message: "请输入书名", trigger: "blur"}],
        borrowDate: [{required: true, message: "请选择借阅日期", trigger: "change"}],
      }
    };
  },
  created() {
    this.fetchData(); // 组件创建时获取数据
  },
  methods: {
    // 获取数据
    async fetchData() {
      try {
        const response = await axios.get("http://localhost:8081/user/findAll"); // 发起GET请求获取用户数据
        if (response.data.code === 1) {
          this.items = response.data.data.map((item) => ({
            id: item.id,
            name: item.name,
            phone: item.phone,
            bookName: item.bookName,
            borrowDate: item.borrowDate,
            returnDate: item.returnDate || "未归还",
          })); // 处理数据并存储到items
          this.updateVisibleItems(); // 更新当前页数据
        } else {
          console.error(response.data.msg); // 打印错误信息
        }
      } catch (error) {
        console.error("请求数据失败：", error); // 打印请求错误信息
      }
    },
    // 删除项
    async deleteItem(index) {
      const deleteIndex = (this.currentPage - 1) * this.pageSize + index; // 计算要删除项的索引
      const deleteId = this.items[deleteIndex].id; // 获取要删除的用户ID

      try {
        const response = await axios.delete(`http://localhost:8081/user/delete/${deleteId}`); // 发起DELETE请求删除用户
        if (response.data.code === 1) {
          this.items.splice(deleteIndex, 1); // 删除数据
          if (this.visibleItems.length === 1 && this.currentPage > 1) {
            this.currentPage -= 1; // 更新当前页码
          }
          this.updateVisibleItems(); // 更新当前页数据
          this.$message.success("删除成功！"); // 显示删除成功消息
        } else {
          this.$message.error(response.data.msg || "删除失败！"); // 显示删除失败消息
        }
      } catch (error) {
        console.error("删除失败：", error); // 打印删除错误信息
        this.$message.error("删除请求失败！"); // 显示删除请求失败消息
      }
    },
    confirmDelete(index) {
      this.deleteItem(index); // 确认删除
    },
    // 更新分页数据
    updateVisibleItems() {
      const start = (this.currentPage - 1) * this.pageSize; // 计算开始索引
      const end = start + this.pageSize; // 计算结束索引
      this.visibleItems = this.items.slice(start, end); // 更新当前页数据
    },
    handlePageUpdate({pageSize, currentPage}) {
      this.pageSize = pageSize; // 更新每页显示条数
      this.currentPage = currentPage; // 更新当前页码
      this.updateVisibleItems(); // 更新当前页数据
    },
    // 处理查询结果
    handleSearchResults(results) {
      this.items = results; // 更新全部数据
      this.updateVisibleItems(); // 更新当前页数据
    },
    // 打开编辑弹窗
    openEditDialog(item) {
      this.Form = {...item}; // 复制选中项数据到编辑表单
      this.dialogFormVisible = true; // 显示编辑表单
    },
    // 提交编辑表单
    async submitEdit() {
      delete this.Form.visible; // 删除不需要的属性

      // 备份原始 returnDate 值
      const originalReturnDate = this.Form.returnDate;

      // 处理 returnDate 的特殊情况
      if (this.Form.returnDate === "未归还") {
        this.Form.returnDate = null; // 将"未归还"转换为null
      }

      // 日期字段格式化
      if (this.Form.borrowDate) {
        this.Form.borrowDate = this.formatDate(this.Form.borrowDate); // 格式化借阅日期
      }
      if (this.Form.returnDate) {
        this.Form.returnDate = this.formatDate(this.Form.returnDate); // 格式化归还日期
      }

      console.log("提交的数据:", this.Form); // 打印提交的数据
      try {
        const response = await axios.post(`http://localhost:8081/user/updateUser`, this.Form); // 发起POST请求更新用户信息
        if (response.data.code === 1) {
          // 更新当前 items 数据
          const itemIndex = this.items.findIndex((item) => item.id === this.Form.id);
          if (itemIndex !== -1) {
            this.$set(this.items, itemIndex, {...this.Form}); // 更新数据
            this.updateVisibleItems(); // 更新当前页数据
          }

          // 恢复原始 returnDate
          this.Form.returnDate = originalReturnDate; // 恢复原始归还日期
          this.$message.success("编辑成功！"); // 显示编辑成功消息
          this.dialogFormVisible = false; // 隐藏编辑表单
        } else {
          this.$message.error(response.data.msg || "编辑失败！"); // 显示编辑失败消息
        }
      } catch (error) {
        console.error("编辑失败：", error); // 打印编辑错误信息
        this.$message.error("编辑请求失败！"); // 显示编辑请求失败消息
      }
    },
    // 日期格式化方法
    formatDate(date) {
      if (!date) return null; // 处理 null 或 undefined
      const d = new Date(date); // 将日期字符串转换为Date对象
      if (isNaN(d.getTime())) {
        console.warn("无效的日期格式:", date); // 打印无效日期警告
        return null; // 返回 null 表示无法格式化
      }
      const year = d.getFullYear(); // 获取年份
      const month = String(d.getMonth() + 1).padStart(2, "0"); // 获取月份并格式化为两位数
      const day = String(d.getDate()).padStart(2, "0"); // 获取日期并格式化为两位数
      return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
    },
    clearReturnDate() {
      this.Form.returnDate = null; // 清空归还日期
    },
  },
};
</script>

<template>
  <!-- 组件模板 -->
  <div id="MainContent">
    <el-container>
      <el-aside style="width: 50px"></el-aside>
      <el-container>
        <el-header style="height: 80px">
          <SelectInput @search="handleSearchResults"></SelectInput> <!-- 绑定搜索事件 -->
        </el-header>
        <el-main style="padding-left: 0">
          <ul v-if="visibleItems.length">
            <li v-for="(item, index) in visibleItems" :key="item.id">
              <span style="height: 40px;line-height: 40px">
                {{ item.name }} 借阅了 {{ item.bookName }}，借阅时间：{{ item.borrowDate }}，归还时间：{{ item.returnDate }}
              </span>
              <div class="actions">
                <el-popover placement="top" width="160" v-model="item.visible">
                  <p>确定删除这条记录吗？</p>
                  <div style="text-align: center; margin: 0">
                    <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="confirmDelete(index); item.visible = false">确定
                    </el-button>
                  </div>
                </el-popover>
                <el-button slot="reference" @click="item.visible = true">删除</el-button>
                <el-button type="text" @click="openEditDialog(item)">编辑</el-button>
              </div>
            </li>
          </ul>
          <p v-else>暂无数据...</p>
        </el-main>
        <!-- 编辑弹窗 -->
        <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible" width="500px" top="12vh">
          <el-form :model="Form" :rules="rules" ref="Form">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="Form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="Form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="书名" prop="bookName">
              <el-input v-model="Form.bookName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="借阅日期" prop="borrowDate">
              <el-date-picker v-model="Form.borrowDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item style="padding-left: 10px" label="归还日期" prop="returnDate">
              <el-date-picker v-model="Form.returnDate" type="date" placeholder="选择日期"
                              @focus="clearReturnDate"></el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="submitEdit">确定</el-button>
          </div>
        </el-dialog>
        <el-footer>
          <BottomPagination @page-change="handlePageUpdate" :total="items.length"></BottomPagination> <!-- 绑定分页事件 -->
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>
<style scoped> /* 样式 */
.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-header {
  line-height: 80px;
  background-color: #B3C0D1;
}

.el-aside {
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  padding: 20px;
  text-align: left;
}

.el-main ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.el-main li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  height: 70px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.actions {
  display: flex;
  gap: 10px;
}

#MainA > section > section > main > ul > li > div > div > div > div:first-child > button {
  background-color: transparent !important; /* 设置为透明 */
  transition: none !important; /* 取消该按钮的颜色切换效果*/
}

/* 上面的button背景颜色设置会影响编辑按钮的一些元素 通过路径取消背景颜色*/
.actions button {
  padding: 5px 10px;
  border: none;
  background-color: #409EFF;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}

.actions button:hover {
  background-color: #66b1ff;
}

/* 编辑表单进行美化 */
.dialog-footer {
  height: 100px;
  line-height: 100px;
} </style>